<template>
  <div class="search-detail">
    <div class="searchSlot">
      <van-search v-model="search" placeholder="请输入搜索关键词" @search="getSearch(search)" />
    </div>
    <!-- 切换 -->
    <van-tabs v-model="active">
      <van-tab v-for="(item,index) in searchList" :key="index" :title="item.name">
        <div v-if="active === 0" class="ranking-box">
          <search-ranking :list="item.brandList" />
        </div>
        <div v-if="active === 1" class="ranking-box">
          <search-ranking :list="item.creditList" />
        </div>
        <div v-if="active === 2" class="ranking-box">
          <search-ranking :list="item.distanceList" />
        </div>
        <div v-if="active === 3" class="ranking-box">
          <search-ranking :list="item.timeList" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCarLikeList, selectCompany } from '../../../api';
import SearchRanking from '../../common/SearchRanking.vue';
import WalletTitle from '../../common/WalletTitle.vue';
export default {
  components: { SearchRanking, WalletTitle },
  name: 'searchDetail',
  data() {
    return {
      search: '',
      active: '',
      searchList: [
        {
          name: '品牌',
          brandList: [
            {
              brand: 'Rolls-Royce劳斯莱斯',
              color: '#fe2d46'
            },
            {
              brand: 'Bentley宾利',
              color: '#f60'
            },
            {
              brand: 'Porsche保时捷',
              color: '#faa90e'
            },
            {
              brand: 'Mercedes-Benz奔驰'
            },
            {
              brand: 'BMW宝马'
            },
            {
              brand: 'Maserati玛莎拉蒂'
            },
            {
              brand: 'Audi奥迪'
            },
            {
              brand: 'Cadillac凯迪拉克'
            },
            {
              brand: 'Volvo沃尔沃'
            },
            {
              brand: 'LEXUS雷克萨斯'
            }
          ]
        },
        {
          name: '信用',
          creditList: [
            {
              brand: 'Volkswagen大众',
              color: '#fe2d46'
            },
            {
              brand: 'TOYOTA丰田',
              color: '#f60'
            },
            {
              brand: 'Honda本田',
              color: '#faa90e'
            },
            {
              brand: 'NISSAN日产'
            },
            {
              brand: 'Buick别克'
            },
            {
              brand: '吉利汽车'
            },
            {
              brand: 'BMW宝马'
            },
            {
              brand: 'Audi奥迪汽车'
            },
            {
              brand: 'Benz奔驰'
            },
            {
              brand: 'BYD比亚迪'
            }
          ]
        },
        {
          name: '距离',
          distanceList: [
            {
              brand: '英菲尼迪',
              color: '#fe2d46'
            },
            {
              brand: '沃尔沃',
              color: '#f60'
            },
            {
              brand: '宾利',
              color: '#faa90e'
            },
            {
              brand: '凯迪拉克'
            },
            {
              brand: '别克'
            },
            {
              brand: '福特'
            },
            {
              brand: '雪佛兰'
            },
            {
              brand: '现代'
            },
            {
              brand: '本田'
            },
            {
              brand: '宝骏'
            }
          ]
        },
        {
          name: '时间',
          timeList: [
            {
              brand: 'Rolls-Royce劳斯莱斯',
              color: '#fe2d46'
            },
            {
              brand: 'Bentley宾利',
              color: '#f60'
            },
            {
              brand: 'Porsche保时捷',
              color: '#faa90e'
            },
            {
              brand: 'Mercedes-Benz奔驰'
            },
            {
              brand: 'BMW宝马'
            },
            {
              brand: 'Maserati玛莎拉蒂'
            },
            {
              brand: 'Audi奥迪'
            },
            {
              brand: 'Cadillac凯迪拉克'
            },
            {
              brand: 'Volvo沃尔沃'
            },
            {
              brand: 'LEXUS雷克萨斯'
            }
          ]
        }
      ],
      searchTitle: '搜索列表'
    }
  },
  methods: {
    getSearch(e) {
      getCarLikeList({
        "name": e
      }).then(res => {
        selectCompany(res.data.data[0].name).then(res2 => {
          console.log('查找唯一的品牌车辆', res2)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.searchSlot /deep/ {
  .van-search {
    width: 90%;
  }
}
.ranking-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 10px;
  box-sizing: border-box;
}
</style>